<?php if(!defined('IN_FIRADIO')) {header('HTTP/1.1 403 Forbidden');exit('<h1>Access Denied</h1>');}?>
<?php $GLOBALS['script'][] = function() {?><script>
vue.data.apidata = {};
vue.data.display_field = {};
vue.data.display_field.hours = true;
vue.data.display_field.host_id = true;
vue.data.display_field.username = true;
vue.data.display_field.cpuseconds = true;
var submit_after_result = function (that) {
};
function intval(i) {
    var i = parseInt(i, 10);
    if (isNaN(i)) i = 0;
    return i;
}
vue.methods.submit = function () {
    const form = {};
    this.ApiPost('/panel/yun/ntuser/cputime.php', form).then(function (data) {
        vue.data.apidata = data.data;
        submit_after_result();
    }, function (data) {
        console.log('reject:', data);
        submit_after_result();
    }).catch(function (reason) {
        console.log('catch:', reason);
        submit_after_result();
    })
};
vue.methods.format_hours = function (hours) {
    const n2 = function (i) {
        if (i < 10) i = '0' + i;
        return i;
    };
    const date = new Date(hours * 3600000);
    const m = n2(date.getMonth() + 1);
    const d = n2(date.getDate());
    const h = n2(date.getHours());
    return m + '月' + d + '日' + h + '点';
};
vue.methods.format_hostid = function (host_id) {
    if (host_id == 2) host_id = 302;
    if (host_id == 3) host_id = 303;
    return host_id;
};
vue.methods.format_cpuseconds = function (cpuseconds) {
    return (cpuseconds / 10000) + '元';
};
vue.mounted = function () {
    vue.methods.submit();
};
</script><?php }?>

<div class="row">
    <div class="col-xs-12 col-sm-8 col-md-6 col-lg-6">
        <div class="box box-info">
            <div class="box-header with-border">
                <h3 class="box-title">CPU点数记录</h3>
                <div class="pull-right">
                    <a class="btn btn-primary btn-xs" type="button" target="_parent" href="/panel.html#/panel/index.html">返回首页</a>
                    <a class="btn btn-primary btn-xs" type="button" target="_parent" href="/panel.html#/panel/yun-nthostlist.html">选购主机</a>
                </div>
            </div>

            <div v-if="apidata.rows">
                <div style="padding-left: 20px;">
                    显示列：
                    <label><input v-model="display_field.hours" type="checkbox" />时间点</label>
                    <label><input v-model="display_field.host_id" type="checkbox" />消费主机</label>
                    <label><input v-model="display_field.username" type="checkbox" />用户名</label>
                    <label><input v-model="display_field.cpuseconds" type="checkbox" />计费点数</label>
                </div>
                <div v-if="apidata.rows.length>0">
                    <table id="example1" class="table table-bordered table-striped dataTable" role="grid" aria-describedby="example1_info">
                        <thead>
                            <tr role="row">
                                <th v-if="display_field.hours">时间点</th>
                                <th v-if="display_field.host_id">消费主机</th>
                                <th v-if="display_field.username">用户名</th>
                                <th v-if="display_field.cpuseconds">计费点数</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr role="row" class="odd" v-for="row in apidata.rows">
                              <td v-if="display_field.hours">{{format_hours(row['hours'])}}</td>
                              <td v-if="display_field.host_id">{{format_hostid(row['host_id'])}}</td>
                              <td v-if="display_field.username">{{row['username']}}</td>
                              <td v-if="display_field.cpuseconds">{{format_cpuseconds(row['cpuseconds'])}}</td>
                              <td>-</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div v-else style="text-align:center">
                    暂无记录
                </div>
            </div>
            <div v-else style="text-align:center">
                <h3>数据载入中，请稍候...</h3>
            </div>
        </div>
    </div>
</div>
